$(function (){
    console.log(window.name);
    var $productInfo = $('#productInfo');
    console.log($productInfo.val());
    $('#NewImg').on('mouseover', function (e){
        var url = "http://localhost:8080/untitled/categoryForm?categoryId=NEW";
        var content = "<p id='specialP'>NEW</p><table id='specialTable'><th id='specialTh'>Product ID</th><th id='specialTh'>Name</th>";
        $.ajax({
            type: "GET",
            url: url + "&method=ajax",
            timeout: 2000,
            dataType:'json',
            success: function (data){
                for (var i = 0; i < data.length; i++){
                    content +="<tr id='specialTr'><td id='specialTd'>" + data[i].productId +  "</td><td id='specialTd' id='name'>" + data[i].name +"</td></tr>";
                }
                content+="</table>";
                $productInfo.html(content);
                show(e.pageX, e.pageY);
            },
            error:function (errorMsg){
                console.log(errorMsg);
            }
        });

    });
    $('#NewImg').on('mouseout', function (){
        hide();
    })

    $('#SouthImg').on('mouseover', function (e){
        var url = "http://localhost:8080/untitled/categoryForm?categoryId=SOUTH";
        var content = "<p id='specialP'>South</p><table id='specialTable'><th id='specialTh'>Product ID</th><th id='specialTh'>Name</th>";
        $.ajax({
            type: "GET",
            url: url + "&method=ajax",
            timeout: 2000,
            dataType:'json',
            success: function (data){
                for (var i = 0; i < data.length; i++){
                    content +="<tr id='specialTr'><td id='specialTd'>" + data[i].productId +  "</td><td id='specialTd'>" + data[i].name +"</td></tr>";
                }
                content+="</table>";
                $productInfo.html(content);
                show(e.pageX, e.pageY);
            },
            error:function (errorMsg){
                console.log(errorMsg);
            }
        });

    });
    $('#SouthImg').on('mouseout', function (){
        hide();
    })

    $('#MainImg').on('mouseover', function (e){
        var url = "http://localhost:8080/untitled/categoryForm?categoryId=MAIN";
        var content = "<p id='specialP'>Main</p><table id='specialTable'><th id='specialTh'>Product ID</th><th id='specialTh'>Name</th>";
        $.ajax({
            type: "GET",
            url: url + "&method=ajax",
            timeout: 2000,
            dataType:'json',
            success: function (data){
                for (var i = 0; i < data.length; i++){
                    content +="<tr id='specialTr'><td id='specialTd'>" + data[i].productId +  "</td><td id='specialTd'>" + data[i].name +"</td></tr>";
                }
                content+="</table>";
                $productInfo.html(content);
                show(e.pageX, e.pageY);
            },
            error:function (errorMsg){
                console.log(errorMsg);
            }
        });

    });
    $('#MainImg').on('mouseout', function (){
        hide();
    })


    function show(x, y){
        $productInfo.css('left', x+10);
        $productInfo.css('top', y+10);
        $productInfo.css('display', 'block');
    }
    function hide(){
        $productInfo.empty();
        $productInfo.css('display', 'none');
    }
    

});
